<template>
	<view>
		<z-paging ref="paging"  :default-page-size="params.pageSize" v-model="list" @query="getList">
			<template #top>
				<uni-nav-bar ref="navBar" statusBar title="商户审核" :border="false" backgroundColor="#ffffff"
					@clickLeft="goBack">
					<template v-slot:left>
						<image class="size-32" src="@/static/svg/icon-back.svg" />
					</template>
				</uni-nav-bar>
				<view class="search-box flex item-center justify-between">
					<view class="flex item-center">
						<image src="@/static/svg/icon-search.svg" mode="heightFix" class="icon-search"></image>
						<input type="text" placeholder="搜商户名称" v-model="merchantShortName" class="search-inp">
					</view>
					<view class="flex item-center">
						<image src="../../static/svg/icon-input-clean.svg" mode="widthFix" :style="{width:'20px'}" @click="cleanText" v-if="merchantShortName.length"></image>
						<view class="search-text" @click="searchNickName">搜索</view>
					</view>
				</view>
				<view class="oper-box flex item-center justify-between">
					<view v-for="(oper,i) in operMenu" :key="i" class="oper-item" :class="{'active':oper.id == params.auditState}" @click="openPer(oper,i)">
						<view>{{oper.title}}</view>
						<view class="active-line" v-if="oper.id == params.auditState"></view>
					</view>
				</view>
			</template>
			<view v-for="item in list" :key="item.id" class="merchant-item">
				<view class="mer-top flex item-center justify-between">
					<text class="merchant-name">{{item.merchantShortName}}</text>
					<text class="mer-status" :style="{'color':getStatus(item.auditState,'color')}">{{getStatus(item.auditState,'text')}}</text>
				</view>
				<view class="flex">
					<image :src="item.logo" mode="" class="mer-logo"></image>
					<view class="mer-inner flex flex-col justify-between">
						<view class="">
							申请编号：{{item.applyNo}}
						</view>
						<view class="">
							类型：{{item.mccName}}
						</view>
						<view class="">
							联系人：{{item.contactName}}
						</view>
						<view class="">
							申请时间：{{item.applyTime}}
						</view>
					</view>
				</view>
				<view class="refuse-Reason" v-if="item.auditState == 3">
					原因：{{item.refuseReason}}
				</view>
				<view class="refuse-Reason flex justify-end" v-if="item.auditState == 1">
					<view class="apply-btn" @click="applyLink(item)">去审核</view>
				</view>
			</view>
			
		</z-paging>	
	</view>
</template>

<script setup>
	import { getmerchantEnterPage } from '@/pagesD/api/merchant.js'
	import { ref, getCurrentInstance,
		onBeforeUnmount } from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let getOpenerEventChannel = ref(null)
	onLoad(() => {
		getOpenerEventChannel.value = getCurrentInstance().ctx.getOpenerEventChannel();
	})
	const operMenu = ref([{
			title: '全部',
			id:'',
			color:'',
			text:''
		},
		{
			title: '待审核',
			id:1,
			color:'rgba(252, 181, 19, 1)',
			text:'待审核'
		},
		{
			title: '已通过',
			id:2,
			color:'rgba(22, 190, 98, 1)',
			text:'已通过'
		},
		{
			title: '未通过',
			id:3,
			color:'rgba(51, 51, 51, 0.6)',
			text:'未通过'
		}
	])
	let list = ref([])
	const merchantShortName = ref('')
	const params = ref({
		auditState:'',
		merchantShortName:'',
		pageNum:1,
		pageSize:10
	})
	let paging = ref()
	const getStatus = (txt,type) => {
		let arr = operMenu.value.filter((it)=> {return it.id==txt})
		if(arr.length && arr[0]){
			return arr[0][type]
		}
		return ''
	}
	const getList = async (num,size) => {
		uni.showLoading()
		params.value.pageNum = num
		let result = await getmerchantEnterPage({
			...params.value
		})
		if (result) {
			paging.value.complete(result.list)
		}
		uni.hideLoading()
		
	}
	
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList(1)
	}
	const openPer = (item,i) => {
		params.value.auditState = item.id
		reFresh()
	}
	const cleanText = () => {
		params.value.merchantShortName = ''
		merchantShortName.value = ''
		reFresh()
	}
	const searchNickName = () => {
		params.value.merchantShortName = merchantShortName.value
		reFresh()
	}
	const applyLink = (item) => {
		uni.navigateTo({
			url: `/pagesD/merchantList/merchantApply?id=${item.id}`,
			events: {
				reFreshPage: (data) => {
					reFresh()
				}
			}
		})
	}
	const goBack = () => {
		if(getCurrentPages().length === 1) {
			uni.reLaunch({
				url: '/pages/home/home'
			})
			return
		}
		getOpenerEventChannel.value.emit('reFreshPage','refresh')
		uni.navigateBack()
	}
	onBeforeUnmount(() => {
		getOpenerEventChannel.value.emit('reFreshPage','refresh')
		uni.navigateBack()
	})
</script>

<style scoped lang="scss">
.search-box {
	margin: 20px;
	// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
	background-color: #ffffff;
	border-radius: 8px;
	padding: 0px 10px;
	height: 36px;

	.icon-search {
		height: 20px;
	}
	.search-inp {
		width: 210px;
		margin-left: 10px;
		font-size: 12px;
	}
}
.search-text{
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	text-align: center;
	color: rgba(250, 69, 67, 1);
	margin-left: 10px;
}
.k-text{
	font-size: 12px;
	font-weight: 400;
	line-height: 17px;
	text-align: center;
	margin-top: 20px;
}
.oper-box {
	margin: 10px;
	// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
	// background-color: #ffffff;
	border-radius: 8px;
	// padding: 20px 0;

	.oper-item {
		width: 25%;
		font-size: 15px;
		font-weight: 400;
		line-height: 30px;
		text-align: center;
		color:rgba(51, 51, 51, 0.6);
		position: relative;
		&.active {
			color: rgba(51, 51, 51, 1);
			.active-line{
				width: 19px;
				height: 4px;
				border-radius: 4px;
				background: rgba(250, 69, 67, 1);
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
			}
		}
	}
}
.merchant-item{
	margin: 10px;
	padding: 14px;
	background-color: #ffffff;
	border-radius: 12px;
	.mer-top{
		border-bottom: 1px solid rgba(245, 245, 245, 1);
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	.merchant-name{
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		color: rgba(51, 51, 51, 1);
	}
	.mer-status{
		font-size: 14px;
		font-weight: 600;
		line-height: 22px;
	}
	.mer-logo{
		width: 84px;
		height: 84px;
		border-radius: 8px;
	}
	.mer-inner{
		width: calc(100% - 94px);
		margin-left: 10px;
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		color: rgba(51, 51, 51, 1);
	}
	.refuse-Reason{
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
		color: rgba(252, 181, 19, 1);
		padding: 10px 0 0 0;
		margin-top: 18px;
		border-top: 1px solid rgba(245, 245, 245, 1);
		word-break: break-all;
		.apply-btn{
			height: 34px;
			padding: 8px 24px;
			border-radius: 8px;
			background: rgba(250, 69, 67, 1);
			color: #ffffff;
		}
	}
}
</style>
